<template>
  <div class="mod-config">
    <div v-if="!isSaleLeader">您当前暂无权限操作该页面</div>
    <div v-if="isSaleLeader">
      <div style="float:left; width:100px;padding:5px;">查看组设置  </div>
      <avatar-list :eclipse="false" :clear="false" :maxNumber="100" style="width:80%;float:left;height:48px" ref="viewers" placeholder="选择人员"></avatar-list>
      <el-button size="mini" @click="setViewers()">保存</el-button>
      <br><br>
    </div>
    <div v-if="isSaleLeader" style="clear:both; padding:10px 0;">
      <el-button  @click="dialogVisibleB2C=true">B2C权限设置</el-button>
      <el-button  @click="dialogVisiblePO=true">运营权限设置</el-button>
      <el-button  @click="dialogVisibleB2B=true">B2B权限设置</el-button>
    </div>

        <el-dialog
          title="权限设置"
          :visible.sync="dialogVisibleB2C"
          width="600">
          <div>
            <div v-for="p in  b2cPlats" style="width:49%; float:left;margin-bottom:5px;">
              <span style="display: inline-block; width:130px;">{{p.name}}</span>
              <el-select v-model="p.remark" placeholder="选择负责组员" style="width:150px;" clearable>
              <el-option
                v-for="item in b2cMembers"
                :key="item.dingId"
                :label="item.realName"
                :value="item.dingId">
              </el-option>
            </el-select>
            </div>
          </div>
          <div style="clear: both;"></div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveB2cPerm">保存</el-button>
            <el-button type="primary" @click="dialogVisibleB2C = false">关闭</el-button>
          </span>
        </el-dialog>
       <el-dialog
         title="权限设置"
         :visible.sync="dialogVisiblePO"
         width="600">
         <div>
           <div v-for="p in poPlats" style="width:49%; float:left;margin-bottom:5px;">
             <span style="display: inline-block; width:130px;">{{p.name}}</span>
             <el-select v-model="p.remark" placeholder="选择负责组员" style="width:150px;" clearable>
             <el-option
               v-for="item in poMembers"
               :key="item.dingId"
               :label="item.realName"
               :value="item.dingId">
             </el-option>
           </el-select>
           </div>
         </div>
         <div style="clear: both;"></div>
         <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="savePoPerm">保存</el-button>
           <el-button type="primary" @click="dialogVisiblePO = false">关闭</el-button>
         </span>
       </el-dialog>

       <el-dialog
         title="权限设置"
         :visible.sync="dialogVisibleB2B"
         width="600">
         <div>
           <div v-for="p in b2bPlats" style="width:49%; float:left;margin-bottom:5px;">
             <span style="display: inline-block; width:130px;">{{p.name}}</span>
             <el-select v-model="p.remark" placeholder="选择负责组员" style="width:150px;" clearable>
             <el-option
               v-for="item in b2bMembers"
               :key="item.dingId"
               :label="item.realName"
               :value="item.dingId">
             </el-option>
           </el-select>
           </div>
         </div>
         <div style="clear: both;"></div>
         <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="saveB2bPerm">保存</el-button>
           <el-button type="primary" @click="dialogVisibleB2B = false">关闭</el-button>
         </span>
       </el-dialog>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import AvatarList from '@/components/ding/avatar-list'

  export default {
    data () {
      return {
        dialogVisibleB2C:false,
        dialogVisiblePO:false,
        dialogVisibleB2B:false,
        b2cMembers:[],
        poMembers:[],
        b2bMembers:[],
        poPlats:[],
        b2cPlats: [],
        b2bPlats: [],
        viewerList:[]
      }
    },
    components:{
      AvatarList
    },
    mixins: [dingMixin],
    activated () {
      //this.getDataList()

    },
    created(){
      this.run_dd_config();

          this.getB2cPlats();
          this.getB2cMembers();

          this.getPoPlats();
          this.getPoMembers();

          this.getB2bPlats();
          this.getB2bMembers();

          this.getViewers()
    },
    methods: {
          saveB2cPerm(){
            this.$http({
              url: this.$http.adornUrl('/sale/savePlat'),
              method: 'post',
              data: this.$http.adornData(this.b2cPlats,false)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({message: '保存成功', type: 'success', duration: 3000})
              } else {
                this.$message({message: data.message, type: 'error', duration: 3000})
              }
            })
          },
          savePoPerm(){
            this.$http({
              url: this.$http.adornUrl('/sale/savePlat'),
              method: 'post',
              data: this.$http.adornData(this.poPlats,false)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({message: '保存成功', type: 'success', duration: 3000})
              } else {
                this.$message({message: data.message, type: 'error', duration: 3000})
              }
            })
          },
          getB2cMembers(){
            this.$http({
              url: this.$http.adornUrl('/sale/listB2cMember'),
              method: 'get',
              params: this.$http.adornParams({})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.b2cMembers = data.data
              } else {
                this.b2cMembers = []
              }
            })
          },
          getPoMembers(){
            this.$http({
              url: this.$http.adornUrl('/sale/listPoMember'),
              method: 'get',
              params: this.$http.adornParams({})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.poMembers = data.data
              } else {
                this.poMembers = []
              }
            })
          },
          getB2cPlats(){
            this.$http({
              url: this.$http.adornUrl('/sale/listB2cPlat'),
              method: 'get',
              params: this.$http.adornParams({})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.b2cPlats = data.data
              } else {
                this.b2cPlats = []
              }
            })
          },
          getPoPlats(){
            this.$http({
              url: this.$http.adornUrl('/sale/listPoPlat'),
              method: 'get',
              params: this.$http.adornParams({})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.poPlats = data.data
              } else {
                this.poPlats = []
              }
            })
          },
          getB2bPlats(){
            this.$http({
              url: this.$http.adornUrl('/sale/listB2bPlat'),
              method: 'get',
              params: this.$http.adornParams({})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.b2bPlats = data.data
              } else {
                this.b2bPlats = []
              }
            })
          },
          getB2bMembers(){
            this.$http({
              url: this.$http.adornUrl('/sale/listB2bMember'),
              method: 'get',
              params: this.$http.adornParams({})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.b2bMembers = data.data
              } else {
                this.b2bMembers = []
              }
            })
          },
          saveB2bPerm(){
            this.$http({
              url: this.$http.adornUrl('/sale/savePlat'),
              method: 'post',
              data: this.$http.adornData(this.b2bPlats,false)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({message: '保存成功', type: 'success', duration: 3000})
              } else {
                this.$message({message: data.message, type: 'error', duration: 3000})
              }
            })
          },
          getViewers(){
            this.$http({
              url: this.$http.adornUrl('/sale/listViewer'),
              method: 'get',
              params: this.$http.adornParams({})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.viewerList = data.data
                this.$refs.viewers.bindData(this.viewerList);
              } else {
                this.viewerList = []
              }
            })
          },
          setViewers(){
            let cc = this.$refs.viewers.getDingEmpIds();
            this.$http({
              url: this.$http.adornUrl('/sale/setViewer'),
              method: 'post',
              data: this.$http.adornData(cc, false)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({message: '保存成功', type: 'success', duration: 3000})
              } else {
                this.$message({message: data.message, type: 'error', duration: 3000})
              }
            })
          }
    }
  }
</script>
